<template>
	<view>
		<view style="width: 90%; margin: 0 auto; padding-top: 3%;">
			<view class="cart" v-for="(item,i) in cartList" :key="item.id">
				<view class="cart1" @click="add(item)">
					<image v-show="item.show==false" src="../../static/cz_zc@2x.png"></image>
					<image v-show="item.show==true" src="../../static/cz_xz@2x.png"></image>
				</view>
				<view class="cart2">
					<image :src="item.goodImg"></image>
				</view>
				<view class="cart3">
					<text>{{item.goodName}}</text>
					<view class="cart4">
						<text>￥{{item.goodPrice}}</text>
					</view>
					<view class="cart5">
						<text>￥{{item.goodSold}}</text>
					</view>
					<view class="cart6">
						<u-number-box v-model="item.count" @click="adds()"></u-number-box>
					</view>
				</view>

			</view>

		</view>
		<view class="cart7">
			<view class="cart8" @click="all()">
				<image v-show="!judge" src="../../static/cz_zc@2x.png"></image>
				<image v-show="judge" src="../../static/cz_xz@2x.png"></image>
				<view class="cart8-1">全选</view>
			</view>
			<view class="cart9">
				<view class="cart9-1">
					合计:
					<text style="color: red;">￥{{zprice}}</text>
				</view>
				<view class="cart9-2">
					<button @click="open">结算</button>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="cart10">支付</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		apiCarts
	} from '../../api/mock'
	import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';
	export default {
		data() {
			return {
				judge: false,
				cartList: [],
				num: 0,
				zprice: 0,
				arr: []
			}
		},
		onLoad() {
			this.getCarts();
			console.log('是否拿到数据2');
			console.log(this.cartList);
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom');
			},
			adds() {},
			add(item) {
				item.show = !item.show;
				if (item.show == true) {
					item.selected = true;
					console.log(this.cartList);
					this.show();
				} else {
					item.selected = false;
					this.show();
				}

			},
			all() {
				this.judge = !this.judge;
				this.arr = [];
				this.cartList.forEach((item, i) => {
					if (this.judge == true) {
						item.show = true;
						item.selected = true;
						this.show();
					} else {
						item.show = false;
						item.selected = false;
						this.show();
					}
				})
				console.log(this.arr);
			},
			show() {
				let o = 0;
				this.cartList.forEach((item) => {
					console.log(item.show);
					if (item.show == true) {
						o += Number(item.count * item.goodSold);
						console.log(this.zprice);
					} else {
						this.zprice += item.count * item.goodSold;
						// console.log(this.zprice);
					}
				});
				this.zprice = o;
				console.log('价格:' + this.zprice);
			},
			getCarts() {
				apiCarts().then((resp) => {
					console.log('是否拿到数据1');
					console.log(resp);
					this.cartList = resp;
				}).catch((e) => {
					console.log(e);
				});

			}
		}
	}
</script>

<style>
	.cart {
		width: 100%;
		display: flex;
		padding-top: 3%;
		border-bottom: 1px solid #dddddd;
	}

	.cart1 {
		width: 10%;
		height: 100%;
		padding-top: 20%;
		padding-left: 3%;
	}

	.cart1 image {
		width: 30px;
		height: 30px;

	}

	.cart2 {
		width: 40%;

	}

	.cart2 image {
		width: 100%;
		height: 200px;
	}

	.cart3 {
		width: 50%;
		padding-top: 3%;
		font-weight: bold;
		color: #949494;
		padding-left: 3%;
		font-size: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cart4 {
		color: #cecece;
		font-size: 20px;
		font-weight: 200;
		padding-top: 8%;
	}

	.cart5 {
		color: black;
		padding-top: 5%;
	}

	.cart6 {
		padding-top: 15%;
		padding-left: 30%;
	}

	.cart7 {
		width: 100%;
		height: 80px;
		background-color: white;
		/* border: 1px solid black; */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;
	}

	.cart7 image {
		width: 30px;
		height: 30px;
	}

	.cart8 {
		width: 40%;
		display: flex;
		padding-top: 6%;
		padding-left: 3%;

	}

	.cart8-1 {
		padding-left: 3%;
		padding-top: 2%;
	}

	.cart9 {
		width: 60%;
		display: flex;
	}

	.cart9-1 {
		width: 60%;
		padding-top: 11.5%;
		padding-left: 10%;
	}

	.cart9-2 {
		width: 40%;
		padding-top: 8%;
		padding-right: 5%;
	}

	.cart9-2 button {
		background-color: red;
		color: white;
		border-radius: 20px;
	}

	.cart10 {
		width: 100%;
		height: 300px;
		background-color: white;
		border-radius: 18px;
		margin-bottom: -5%;

	}
</style>